<template>
  <div class="category">
    <div class="site-content">
      <section-title>
        <div class="category-header">
          <h1 class="title">分 类</h1>
        </div>
      </section-title>
      <!---说明--->
      <div class="statement">
        <quote>
          <p>唯有热爱，能抵岁月漫长</p>
        </quote>
      </div>
      <!----->
      <hr />
      <div class="category-list animate">
        <div @click="toCategoryArticle(item.id,item.name)" class="category-item" v-for="item in list" :key="item.id"><a target="_blank" >
<!--          :href="item.path"-->
            <div class="site-name">{{item.name}}</div>
            <div class="site-detail">{{item.name}}</div>
          </a></div>
      </div>
    </div>
  </div>
</template>

<script>
import sectionTitle from '@/components/section-title'
import Quote from "@/components/quote";
import { getAll } from '../api/category'
export default {
  name: "Category",
  data() {
    return {
      list: []
    }
  },
  components: {
    Quote,
    sectionTitle
  },
  methods: {
    toCategoryArticle(id,name) {
      this.$router.push({ name: 'categoryArticle', params: { typeId: id, typeName: name } }).catch(data => { });  //最后的catch是为了防止重复push相同的路由报错警告
    },
    getCategoryList() {
      this.$store.dispatch('setLoading', true);
      getAll().then(response => {
        this.list = response.data.data.result;
        this.$store.dispatch('setLoading', false);
      });
    }
  },
  mounted() {
    this.getCategoryList();
  }
}
</script>

<style scoped lang="less">
.category {
  padding-top: 40px;
}
.category-header {
  width: 100%;
  align-items: center;
  margin-top: 80px;
  font-weight: 400;
  .title {
    text-align: center;
    font-size: 30px;
  }
}
.statement {
  margin: 60px 0 20px 0;
  a {
    color: #ff6d6d;
  }
  p {
    line-height: 2rem;
  }
}
hr {
  margin: 40px 0;
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(255, 109, 109, 0.75),
    rgba(0, 0, 0, 0)
  );
}
.category-list {
  width: 100%;
  .category-item {
    cursor: pointer;
    display: inline-block;
    width: 30%;
    // height: 100px;
    margin: 0 5% 20px 0;
    padding: 10px 30px;
    border: 1px solid #ececec;
    border-radius: 3px;
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    .site-name,
    .site-detail {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-bottom: 10px;
      line-height: 1.5rem;
    }
    .site-name {
      font-size: 20px;
      color: #4e4e4e;
      border-bottom: 1px dotted #ececec;
    }
    .site-name:before {
      content: "#";
      margin-right: 5px;
      color: #7a7a7a;
      font-size: 1.2em;
      font-weight: 700;
    }
    .site-detail {
      font-size: 13px;
      padding-top: 10px;
    }
  }
}
/*******/
@media (max-width: 800px) {
  .category-header {
    margin-top: 0;
  }
  .category-list {
    .category-item {
      width: 45%;
      &:nth-of-type(2n) {
        margin-right: 0;
      }
      &:nth-of-type(3n) {
        margin-right: 5%;
      }
    }
  }
}
@media (max-width: 600px) {
  .category-list {
    .category-item {
      display: block;
      width: 90%;
      margin: 0 auto 20px auto;
      &:nth-of-type(2n) {
        margin-right: auto;
      }
      &:nth-of-type(3n) {
        margin-right: auto;
      }
    }
  }
}
</style>
